<template>
  <div class="addCompany">
    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px">
      <el-form-item label="子公司名称" prop="branch_company">
        <el-input v-model="form.branch_company" placeholder="输入子公司名称"></el-input>
      </el-form-item>
      <el-form-item label="法人姓名" prop="user_name">
        <el-input v-model="form.user_name" placeholder="输入法人姓名"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="tel">
        <el-input v-model="form.tel" placeholder="输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="营业执照" prop="business_license">
        <!-- <el-input style="width: 80%;" v-model="form.business_license" placeholder="请输入营业执照链接或上传"></el-input> -->
        <!-- <el-button style="margin-left: 10px;" size="small" type="primary">预览</el-button> -->
        <!-- <el-upload
          style="margin-left: 10px;display: inline-block;width:15%"
          :action="uploadUrl"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>-->
        <el-upload
          class="avatar-uploader"
          :action="uploadUrl"
          :show-file-list="false"
          :drag="true"
          :on-success="handleAvatarSuccess"
        >
        <el-image
        v-if="form.business_license"
        style="width: 100%; height: 100%"
        :src="form.business_license"
        :fit="'fill'"></el-image>
          <div v-else>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处,或
              <em>点击上传</em>
            </div>
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('ruleForm')">{{isEdit ? '编辑' : '添加'}}</el-button>
        <!-- <el-button>取消</el-button> -->
      </el-form-item>
    </el-form>
  </div>
</template>
    
<script>
import { addSubCompany, editSubCompany } from "@/api/business";
import { uploadUrl } from "@/utils/tool";
import { isValidPhoneNumber } from "@/utils/validate";
export default {
  name: "addCompany",
  props: {
    isEdit: {
      default: false,
      type: Boolean
    },
    editForm: {
      default: {},
      type: Object
    }
  },
  data() {
    var validateTel = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入法人手机号"));
      } else {
        if (!isValidPhoneNumber(value)) {
          callback(new Error("手机号格式不正确"));
        } else {
          callback();
        }
      }
    };
    return {
      uploadUrl,
      form: {
        tel: "",
        user_name: "",
        branch_company: "",
        business_license: ""
      },
      rules: {
        user_name: [
          { required: true, message: "请输入法人姓名", trigger: "blur" }
        ],
        tel: [{ required: true,validator: validateTel, trigger: "blur" }],
        branch_company: [
          { required: true, message: "请输入子公司名称", trigger: "blur" }
        ],
        business_license: [
          { required: true, message: "请上传营业执照图片", trigger: "blur" }
        ]
      }
    };
  },
  mounted() {
    this.initial();
  },
  methods: {
    async initial() {
      if (this.isEdit) {
        let {
          tel,
          user_name,
          branch_company,
          business_license,
          id
        } = this.editForm;
        this.form.tel = tel;
        this.form.user_name = user_name;
        this.form.branch_company = branch_company;
        this.form.business_license = business_license;
        this.form.id = id;
      }
    },
    onSubmit(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          if (this.isEdit) {
            let result = await editSubCompany(this.form);
            if (result.code == 200) {
              this.$message.success(result.msg || "编辑成功");
              setTimeout(() => {
                this.$emit("refresh");
              }, 500);
            }
          } else {
            let result = await addSubCompany(this.form);
            if (result.code == 200) {
              this.$message.success(result.msg || "添加成功");
              setTimeout(() => {
                this.$emit("refresh");
              }, 500);
            }
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleAvatarSuccess(res, file) {
      if (res.code == 200) {
        this.form.business_license = res.data.url;
        console.log("res", res);
      }
    }
  }
};
</script>
    
<style lang="scss" scoped>
.addCompany {
}
</style>
    